<template>
  <div class="classify app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="false" titelText="消息列表"> </header-nav>
    </div>

    <!-- 中间 -->
    <div class="content_body" v-if="manageList.length > 0">
      <div class="listItem" v-for="(item, index) in manageList" :key="index">
        <div class="listItem-text">
          <div class="title">
            <van-badge dot v-if="item.readStatus == 0">
              <img class="img" src="../assets/images/manageListImg.png" alt="" v-if="item.messageType == 1" />
              <img class="img" src="../assets/images/manageListImg2.png" alt="" v-if="item.messageType == 2" />
              <img class="img" src="../assets/images/manageListImg3.png" alt="" v-if="item.messageType == 3" />
              <img class="img" src="../assets/images/manageListImg.png" alt="" v-if="item.messageType == 4" />
            </van-badge>
            <div class="right-tit">
              {{ item.title }}
            </div>
          </div>
          <div class="content">
            {{ item.content }}
          </div>
        </div>
        <div class="listItem-btn" v-if="item.messageType == 1 || item.messageType == 2" @click.stop="goResult(item)">
          去审批
        </div>
        <div class="listItem-btn" v-if="item.messageType == 3" @click="goCheck()">
          去处理
        </div>
        <div class="listItem-btn" v-if="item.messageType == 4" @click="goCheck2(item)">
          去审批
        </div>
      </div>
      <div class="margin-bottom-20">

      </div>
    </div>
    <div class="content_body" v-else>
      <div class="empty">
        <img src="../assets/images/empty1.png" alt="" />
        <div>暂无消息</div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Classify">
import { setMessageNum } from '../util/util'
const router = useRouter()
const { useClassify } = $globalStore

//获取未读审批列表
const manageList = ref([])

const getManageList = async () => {
  const res = await useClassify.getMessageList()
  if (res.code == 0) {
    manageList.value = res.data
    console.log(manageList.value)
  }
}

const goResult = async (val) => {

  const res = await useClassify.readMsg(val.id)
  if (res.code == 0) {
    if (val.messageType == 1) {
      router.push({ name: 'filingDetail', query: { id: val.bizId, progressId: val.processId, from: 2, chooseFlag: val.chooseFlag } })
    } else if (val.messageType == 2) {
      router.push({
        name: 'approveResult',
        query: { id: val.processId, caseId: val.bizId, fromType: 2 },
      })
    }
    const res = await $globalStore.useCommon.getMessageNum()
    if (res.code == 0) {
      setMessageNum(res.data)
    }
  }
}

const goCheck2 = (val) => {
  router.push({ name: 'approvalTask', query: { id: val.processId, caseId: val.bizId } })
}

const goCheck = (val) => {
  router.push({ name: 'detailSuperviseTask', query: { id: val.bizId } })
}

onMounted(async () => {
  getManageList()
})
</script>
<style lang="less" scoped>
.classify {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: #f7f7f7;

  .margin-bottom-20 {
    margin-bottom: 20px;
  }

  .content_body {
    height: calc(100% - 100px);
    margin-top: 46px;
    overflow-y: auto;
    padding: 10px 8px 0 8px;

    .listItem {
      margin-bottom: 8px;
      background-color: #ffffff;
      border-radius: 8px;

      .listItem-text {
        .title {
          display: flex;
          align-items: center;
          padding: 16px 12px 10px 12px;

          .img {
            width: 32px;
            height: 32px;
          }

          .right-tit {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 24px;
            color: #2b2b2b;
          }

          :deep(.van-badge--top-right) {
            transform: translate(0);
          }
        }

        .content {
          padding: 0 12px;
          margin-bottom: 12px;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #8c8c8c;
          max-height: 40px;
          white-space: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .listItem-btn {
        padding: 12px 0;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: var(--van-primary-color);
        border-top: 1px solid #f0f0f0;
      }
    }

    .empty {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      >img {
        width: 128px;
        height: 96px;
      }

      >div {
        margin-top: 12px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(153, 153, 153, 1);
      }
    }
  }


}
</style>
